<template>
  <div class="xiecheng">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div>{{ i18n('course.structure.data') }}</div>
        </div>

        <div class="admin_main_block_right">
          <div class="mr10">
            <el-button icon="Back" @click="router.go(-1)">
              {{ i18n('common.return') }}
            </el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <div style="height:calc(100vh - 100px);">
          <relation-graph ref="relationGraph$" :options="options"></relation-graph>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="course-view">
  import { useBase } from "@/hooks/base/useBase"
  import RelationGraph from 'relation-graph/vue3'

  const { router, query, i18n, isAuth } = useBase()

  const model = ref('education/course/structure')

  const relationGraph$ = ref()
  const options = {
    debug: false,
    defaultNodeBorderWidth: 0,
    defaultLineShape: 2,
    layouts: [
      {
        label: '中心',
        layoutName: 'center',
        layoutClassName: 'seeks-layout-center',
        distance_coefficient: 1
      }
    ]
  }

  const init = () => {
    $http({
      url: $http.adornUrl(`/${model.value}/data`),
      method: 'get',
      params: $http.adornParams({
        id: query.course_id
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        relationGraph$.value.setJsonData(data.data, () => {})
      }
    })
  }

  onMounted(() => {
    init()
  })
</script>
